<template>
  <div class="_wz_cent_main _wz_editConfiguration">
    <Row style="width: 100%; height: 100%">
      <Col span="12" style="height: 100%;flex: 0 0 calc(100% - 500px);max-width: calc(100% - 500px);display: flex;align-items: center;justify-content: center;">
        <div :style="{ width: !!dataConfiguration.width ? dataConfiguration.width + 'px' : '100%', height: !!dataConfiguration.height ? dataConfiguration.height + 'px' : '100%',}">
<!--        <div v-if="!!dataConfiguration" :style="{ width: !!dataConfiguration.width ? dataConfiguration.width + 'px' : '100%', height: !!dataConfiguration.height ? dataConfiguration.height + 'px' : '100%',}">-->
          <component :is="url" :dataConfiguration="dataConfiguration"></component>
        </div>
      </Col>
      <Col span="6" style="height: 100%;overflow: auto;border-left: 1px solid #e8eaec;flex: 0 0 500px;max-width: 500px;">
        <Divider>参数配置</Divider>
        <component :is="url + 'Form'" style="height: calc(100% - 56px)" @parentFun="parentFun"></component>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";

import BlineChartForm from "../charts/baiDu/lineChart/form.vue";
import BareaChartForm from "../charts/baiDu/areaChart/form.vue";
import BhistogramForm from "../charts/baiDu/histogram/form.vue";
import BbarChartForm from "../charts/baiDu/barChart/form.vue";
import BpieChartForm from "../charts/baiDu/pieChart/form.vue";
import BringChartForm from "../charts/baiDu/ringChart/form.vue";
import BradarChartForm from "../charts/baiDu/radarChart/form.vue";
import BsunriseChartForm from "../charts/baiDu/sunriseChart/form.vue";
import BfunnelDiagramForm from "../charts/baiDu/funnelDiagram/form.vue";
import BdashboardForm from "../charts/baiDu/dashboard/form.vue";
import BwaterDropDiagramForm from "../charts/baiDu/waterDropDiagram/form.vue";
import BstatisticalMapForm from "../charts/baiDu/statisticalMap/form.vue";
import BBaiduMapsForm from "../charts/baiDu/BaiduMaps/form.vue";

import BlineChart from "../charts/baiDu/lineChart/charts.vue";
import BareaChart from "../charts/baiDu/areaChart/charts.vue";
import Bhistogram from "../charts/baiDu/histogram/charts.vue";
import BbarChart from "../charts/baiDu/barChart/charts.vue";
import BpieChart from "../charts/baiDu/pieChart/charts.vue";
import BringChart from "../charts/baiDu/ringChart/charts.vue";
import BradarChart from "../charts/baiDu/radarChart/charts.vue";
import BsunriseChart from "../charts/baiDu/sunriseChart/charts.vue";
import BfunnelDiagram from "../charts/baiDu/funnelDiagram/charts.vue";
import Bdashboard from "../charts/baiDu/dashboard/charts.vue";
import BwaterDropDiagram from "../charts/baiDu/waterDropDiagram/charts.vue";
import BstatisticalMap from "../charts/baiDu/statisticalMap/charts.vue";
import BBaiduMaps from "../charts/baiDu/BaiduMaps/charts.vue";

import AlineChartForm from "../charts/ANTV/lineChart/form.vue";
import AhistogramForm from "../charts/ANTV/histogram/form.vue";
import AbarChartForm from "../charts/ANTV/barChart/form.vue";
import ApieChartForm from "../charts/ANTV/pieChart/form.vue";
import AareaChartForm from "../charts/ANTV/areaChart/form.vue";
import AringChartForm from "../charts/ANTV/ringChart/form.vue";
import AradarChartForm from "../charts/ANTV/radarChart/form.vue";
import AfunnelDiagramForm from "../charts/ANTV/funnelDiagram/form.vue";
import AdashboardForm from "../charts/ANTV/dashboard/form.vue";
import AencephalogramForm from "../charts/ANTV/encephalogram/form.vue";
import AflowChartForm from "../charts/ANTV/flowChart/form.vue";
import AstatisticalMapForm from "../charts/ANTV/statisticalMap/form.vue";
import AGaudMapForm from "../charts/ANTV/GaudMap/form.vue";

import AlineChart from "../charts/ANTV/lineChart/charts.vue";
import Ahistogram from "../charts/ANTV/histogram/charts.vue";
import AbarChart from "../charts/ANTV/barChart/charts.vue";
import ApieChart from "../charts/ANTV/pieChart/charts.vue";
import AareaChart from "../charts/ANTV/areaChart/charts.vue";
import AringChart from "../charts/ANTV/ringChart/charts.vue";
import AradarChart from "../charts/ANTV/radarChart/charts.vue";
import AfunnelDiagram from "../charts/ANTV/funnelDiagram/charts.vue";
import Adashboard from "../charts/ANTV/dashboard/charts.vue";
import Aencephalogram from "../charts/ANTV/encephalogram/charts.vue";
import AflowChart from "../charts/ANTV/flowChart/charts.vue";
import AstatisticalMap from "../charts/ANTV/statisticalMap/charts.vue";
import AGaudMap from "../charts/ANTV/GaudMap/charts.vue";
export default {
  components: {
    BlineChartForm,
    BareaChartForm,
    BhistogramForm,
    BbarChartForm,
    BpieChartForm,
    BringChartForm,
    BradarChartForm,
    BsunriseChartForm,
    BfunnelDiagramForm,
    BdashboardForm,
    BwaterDropDiagramForm,
    BstatisticalMapForm,
    BBaiduMapsForm,

    BlineChart,
    BareaChart,
    Bhistogram,
    BbarChart,
    BpieChart,
    BringChart,
    BradarChart,
    BsunriseChart,
    BfunnelDiagram,
    Bdashboard,
    BwaterDropDiagram,
    BstatisticalMap,
    BBaiduMaps,

    AlineChartForm,
    AhistogramForm,
    AbarChartForm,
    ApieChartForm,
    AareaChartForm,
    AringChartForm,
    AradarChartForm,
    AfunnelDiagramForm,
    AdashboardForm,
    AencephalogramForm,
    AflowChartForm,
    AstatisticalMapForm,
    AGaudMapForm,

    AlineChart,
    Ahistogram,
    AbarChart,
    ApieChart,
    AareaChart,
    AringChart,
    AradarChart,
    AfunnelDiagram,
    Adashboard,
    Aencephalogram,
    AflowChart,
    AstatisticalMap,
    AGaudMap,
  },
  props: [], //接收来自父组件的数据
  data() {
    return {
      url: "",
      dataConfiguration: {}, //配置数据
    };
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

    this.url = this.$route.query.name;
  },
  methods: {//执行的方法
    parentFun(data) {
      let that = this;
      // that.dataConfiguration = {};
      that.$nextTick(function () {
        that.dataConfiguration = data;
        console.log(data)
        console.log(JSON.parse(JSON.stringify(data)))
        // that.dataConfiguration = JSON.parse(JSON.stringify(data));
      });
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  },
};
</script>
<style lang="less">
._wz_editConfiguration {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
